<template>
    <div class="main ad-manage-list">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <router-link :to="{name: 'adManageAdd'}" class="filter-item">
                    <el-button type="success" size="small" icon="el-icon-circle-plus" plain>新建广告</el-button>
                </router-link>
            </div>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
                <input type="text" style="display: none"/><!--form input placeholder-->
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="广告名称：" prop="adName">
                        <el-input @keyup.enter.native="search" v-model="listQuery.adName" placeholder="广告名称" maxlength="50" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="所属广告位：" label-width="100px" prop="aid">
                      <el-select v-model="listQuery.aid" placeholder="请选择">
                        <el-option
                          v-for="item in pList"
                          :key="item.id"
                          :label="item.positionName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="是否启用：" label-width="100px" prop="status">
                      <el-select v-model="listQuery.status" placeholder="请选择">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="标题" prop="adName"></el-table-column>
                <el-table-column align="center" label="Banner" prop="image">
                    <template slot-scope="scope" v-if="scope.row.image.split(',')">
                        <img :src="scope.row.image.split(',')[0]" style="max-width: 100%; max-height: 100px">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="开始时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.startTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="结束时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.endTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="所属广告位" prop="positionName">
                  <template slot-scope="scope">
                    {{ scope.row.positionName }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="是否启用" width="120">
                    <template slot-scope="scope">
                        <!--<el-switch-->
                        <!--disabled-->
                        <!--v-model="scope.row.status"-->
                        <!--@change="updateStatus(scope.row)"-->
                        <!--active-color="#13ce66"-->
                        <!--inactive-color="#ff4949"-->
                        <!--active-text="是"-->
                        <!--inactive-text="否"-->
                        <!--:active-value="1"-->
                        <!--:inactive-value="0">-->
                        <!--</el-switch>-->
                        <span v-text="scope.row.status === 1 ? '是' : '否'" :style="`color: ${scope.row.status === 1?'#1a9f03':'#999'}`"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="排序" prop="sort" width="80"></el-table-column>
                <el-table-column align="center" label="操作" width="120" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                        <router-link :to="{name: 'adManageEdit', params: {id: scope.row.id}}">
                            <el-button type="primary" size="mini">编辑</el-button>
                        </router-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'adManage',
        data() {
            return {
                list: [],
                listQuery: {
                    adName: '',
                    status: '',
                    pageIndex: 1,
                    pageSize: 10,
                    isPage: 1,
                    aid: ''
                },
                pList: [],
                pNameList: [],
                listTotal: 0,
                listLoading: false,
            }
        },
        created() {
            if (this.$store.getters.cachedViews.length === 0) this.getPositionList()
        },
        activated() {
          this.getPositionList()
        },
        methods: {
          // 获取广告位置列表
          getPositionList() {
            this.request({
              url: '/bsnl-ad/adposition/list',
              method: 'get',
              params: {
                pageIndex: 1,
                pageSize: 1000,
                isPage: 1
              }
            }).then(res => {
              this.pList = res.data;
              this.getList();
            }).catch(err => {
              console.log(err);
              this.pList = [];
            });
          },

          // 广告位文字转换
          numToWord(val) {
            let res
            this.pList.map(item => {
              if(item.id === val) {
                res = item.positionName
              }
            })
            return res
          },

            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-ad/ad/query',
                    method: 'post',
                    data: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                  this.list.map(item => {
                         item.positionName = this.numToWord(item.aid)
                        return item.positionName
                    })
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            // 启用/禁用
            updateStatus({id, status}) {
                // this.request({
                //     url: '/ad/status',
                //     method: 'post',
                //     data: {
                //         id,
                //         status
                //     }
                // }).then(() => {
                //     this.$message.success(status == 1 ? '启用成功' : '禁用成功');
                // }).catch(err => {
                //     this.$message.error(err);
                // });
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            // 搜索
            search() {
                this.listQuery.pageIndex = 1;
                this.getList();
            },
            //切换每页条数
            handleSizeChange (value) {
                this.listQuery.pageSize = value;
                this.getList()
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.pageIndex = page;
                this.getList();
            },
        }
    }
</script>

<style lang="scss">
    .ad-manage-list>section{
        padding: 24px;
        background: #fff;
    }
</style>
